<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:400px;height:300px;border:solid 1px black;position: relative;}
        .box p{margin:0;height:40px;position: absolute;top:130px;left:0;width:0px;background: blue;color:#fff;text-align: center;line-height:40px;}
    </style>
</head>
<body>
    <div class="box">
        <p></p>
    </div>
</body>
<script>
    const p = document.querySelector(".box p")
    const box = document.querySelector(".box")

    // 目标
    const w = parseInt(getComputedStyle(box).width);

    // 步长
    let speed = 9;

    let t;

    document.onclick = function(){
        clearInterval(t);
        t = setInterval(()=>{
            if(w - p.offsetWidth < speed){
                clearInterval(t);
                p.style.width = w + "px";
                p.innerHTML = "100%";

                // 进度条走完之后，要完成的事情
                // 如：
                box.style.display = "none";

            }else{
                p.style.width = p.offsetWidth + speed + "px";
                p.innerHTML = parseInt(p.offsetWidth / w * 100) + "%";
            }
        },30);
    }

    // 1. 事件开启计时器之前，一定要先清除计时器
    // 2. 在计时器内部，清除计时器和正常功能之后，应该是二选一的过程
    // 3. 如果：条件为当前值大于终点时停止计时器，并强行将元素设置为终点值，会造成元素有一瞬间超出终点
    // 4. 将条件修改为：剩下距离小于步长，即停止计时器，再强行将元素设置为终点值


</script>
</html>